<template>
  <v-toolbar color="blue-grey-darken-3">
    <template v-slot:prepend>
      <div class="text-h7">教务管理系统</div>
    </template>

    <v-divider class="ms-3" inset vertical></v-divider>

    <v-spacer></v-spacer>

    <v-spacer></v-spacer>
  </v-toolbar>
  <v-card flat title="已选课程">
    <v-btn icon="mdi-download" @click="downloadcsv" style="margin-left: 10px"></v-btn>
    <v-data-table :headers="headers" :items="items">
      <template v-slot:item="{ item }">
        <!-- "course_id","student_id","staff_id","class_time","teacher_name","course_name","credit" -->
        <tr>
          <td>{{ item.course_id }}</td>
          <td>{{ item.course_name }}</td>
          <td>{{ item.teacher_name }}</td>
          <td>{{ item.staff_id }}</td>
          <td>{{ item.class_time }}</td>
          <td>{{ item.credit }}</td>
          <td>{{ item.credit_hours }}</td>
        </tr>
      </template>
    </v-data-table>
  </v-card>
  <v-dialog v-model="selecting" width="auto" persistent>
    <v-card width="400" height="120">
      <v-card-text>
        {{ selectmsg }}
      </v-card-text>
      <v-card-actions>
        <v-btn
          color="primary"
          block
          @click="
            selecting = false;
            this.getCourse();
          "
          >确认</v-btn
        >
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import axios from "axios";

export default {
  async created() {
    let new_items = [];
    await axios({
      method: "get",
      url: "http://127.0.0.1:8000/student/selected_course_query",
      params: {
        student_id: this.$root.userinfo.id,
      },
    }).then((res) => {
      console.log(res);
      new_items = res.data;
    });
    this.items = new_items.data.data;
    console.log("initing items", this.items);
  },
  data() {
    return {
      selecting: false,
      selectmsg: "", //"student_name","student_id","semester","course_id","staff_id"
      headers: [
        { key: "course_id", align: "start", sortable: false, title: "课程号" },
        { key: "course_name", title: "课程名" },
        { key: "teacher_name", title: "教师名" },
        { key: "staff_id", title: "教师号" },
        { key: "class_time", title: "上课时间" },
        { key: "credit", title: "学分" },
        { key: "credit_hours", title: "学时" },
      ],
      items: [],
    };
  },
  methods: {
    showDropdown(item) {
      // 处理下拉菜单按钮点击事件
      console.log("Dropdown clicked for:", item);
      // 在这里可以添加下拉菜单的显示逻辑
    },
    async deleteC(course) {
      console.log(course);
      //sname, student_id, semester, course_id, staff_id
      let student_id = this.$root.userinfo.id;
      let sname = this.$root.userinfo.name;
      let msg = "";
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/student/delete_course",
        params: {
          course_id: course.course_id,
          student_id: student_id,
        },
      }).then((res) => {
        console.log(res);
        msg = res.data.msg;
      });
      this.selectmsg = msg;
      this.selecting = true;
    },
    async getCourse() {
      let new_items = [];
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/student/selected_course_query",
        params: {
          student_id: this.$root.userinfo.id,
        },
      }).then((res) => {
        console.log(res);
        new_items = res.data;
      });
      this.items = new_items.data.data;
      console.log("initing items", this.items);
    },
    // 生成excel，meta为表数据，data为传入数据，name为生成的文件名称
    createExcel(meta, data, name) {
      // '\n' 表示一行的结束，','表示数据依次放在新的单元格
      let header = "";
      for (let i = 0; i < meta.length; i++) {
        header += meta[i] + ",";
      }
      console.log(header);
      let table = header + "\n";
      for (let i = 0; i < data.length; i++) {
        let line = "";
        for (let j = 0; j < meta.length; j++) {
          line += data[i][j] + ",";
        }
        table += line + "\n";
      }
      //encodeURIComponent解决中文乱码
      let uri =
        "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(table);
      //通过创建a标签实现
      var link = document.createElement("a");
      link.href = uri;
      //对下载的文件命名
      link.download = name + ".csv";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    downloadcsv() {
      console.log(this.items)
      let head = ["周一", "周二", "周三", "周四", "周五"];
      let data = []
      for (let i=0;i<10;i++)
      {
        let tmp=[]
        for(let j=0;j<10;j++)
        {
          tmp.push("")
        }
        data.push(tmp)
      }
      for (let i = 0; i < this.items.length; i++) {
        let day="",time=""
        if(this.items[i].class_time.length==7) //星期三9-10
        {
          day=this.items[i].class_time.substr(0,3);
          time=this.items[i].class_time.substr(3,4);
        }
        else
        {
          day=this.items[i].class_time.substr(0,3);
          time=this.items[i].class_time.substr(3,3);
        }
        console.log(day,time);
        let days={"星期一":0,"星期二":1,"星期三":2,"星期四":3,"星期五":4}
        let times={"1-2":0,"3-4":1,"5-6":2,"7-8":3,"9-10":4,"11-12":5}
        let dayy=days[day];
        let timee=times[time];
        console.log(dayy,timee);
        data[dayy][timee]=this.items[i].course_name;
      }
      console.log(head, data);
      this.createExcel(head, data,"课程表");
    },
  },
};
</script>
